<script setup lang="ts">
const { text, type = 'primary', color } = defineProps<{
  text: string
  color?: string
  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' // 可选的类型
  size?: 'small' | 'medium' | 'large' // 可选的大小
  round?: boolean // 是否圆角
}>()
</script>

<template>
  <view class="tag" :class="[type, size]" :style="{ backgroundColor: color, borderRadius: round ? '40rpx' : '12rpx' }">
    {{ text }}
  </view>
</template>

<style lang="scss" scoped>
.tag {
  display: inline-block;
  padding: 4rpx 14rpx;
  border-radius: 12rpx;
  background-color: $uni-color-primary;
  color:#fff;
  font-size: 24rpx;
  font-weight: normal;
  cursor: pointer;

  &.primary{
    background-color: $uni-color-primary;
  }

  &.warning {
    background-color: #FFB900;
  }

  &.success {
    background-color: $uni-color-success;
  }

  &.danger {
    background-color: $uni-color-error;
  }

  &.small {
    padding: 4rpx 14rpx;
    transform: scale(0.7);
  }

  &.medium {
    padding: 8rpx 20rpx;
  }
}
  </style>
